<script setup lang="ts">
import {
  getPopulation,
  setPopulation
} from '@/service/api/sys/dataWarehouse/countryData'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'
import { ElMessage } from 'element-plus'
interface formType {
  year?: Number | String
  govOrgId?: Number | String
  male0To18?: Number | String
  createDtm?: Number | String
  male18To40?: Number | String
  male40To60?: Number | String
  updateDtm?: Number | String
  male60Above?: Number | String
  female0To18?: Number | String
  female18To40?: Number | String
  female40To60?: Number | String
  female60Above?: Number | String
  maleTotal?: Number | String
  femaleTotal?: Number | String
}
const props = defineProps({
  filterRule: {
    type: Object,
    default: () =>
      ({
        govOrgId: 1,
        year: 2023
      } as formType)
  }
})

const template = {
  year: 0,
  govOrgId: 0,
  male0To18: 0,
  createDtm: '',
  male18To40: 0,
  male40To60: 0,
  updateDtm: '',
  male60Above: 0,
  female0To18: 0,
  female18To40: 0,
  female40To60: 0,
  female60Above: 0,
  maleTotal: 0,
  femaleTotal: 0
}
const form = ref<formType>({}) // 表单源
const editForm = ref<formType>({}) // 可编辑和展示的表单
const disabled = ref(false) // 当前可编辑的状态: 可编辑 不可编辑

// 获取区域概况 更改当前编辑状态未不可编辑
const updateArea = async () => {
  console.log(props.filterRule)
  const res = await getPopulation(props.filterRule)
  form.value = res.data || Object.assign({}, template)
  editForm.value = form.value
  disabled.value = false
}

// 监测传入的筛选条件改变, 获取数据
watch(
  () => props.filterRule,
  () => updateArea(),
  {
    immediate: true,
    deep: true
  }
)

// 更改编辑表单的内容, 利用div来做编辑的方法
const setForm = (field: string, val: any) => {
  const editType = editForm.value as { [k: string]: string | number }
  editType[field] = val
}

// 保存编辑
const changeDisabled = async () => {
  const editType = editForm.value as { [k: string]: string | number }
  console.log(props.filterRule)
  if (editType.govOrgId > 0 && editType.year > 0) {
    // 保存
    if (disabled.value) {
      const res = await setPopulation(editForm.value)
      console.log(res, editForm.value)
      updateArea()
    } else {
      // 编辑
      editForm.value = { ...form.value }
    }
    disabled.value = !disabled.value
  } else {
    ElMessage.warning('暂无数据, 无法编辑!')
  }
}
</script>

<template>
  <div class="warehouse">
    <div class="title">人口结构</div>
    <div class="content flex flex-col p-3.5">
      <div class="my-3 mt-0 grid grid-cols-4">
        <div
          class="flex items-center justify-between border border-dashed border-[--auxiliary] px-3.5 shadow-inner shadow-[#0da7c1]"
        >
          <span class="font-bold text-white">男性</span>
          <div>
            <span class="text-xs text-[#5E9DB4]"
              >共 {{ editForm.maleTotal }} 人</span
            >
          </div>
        </div>
      </div>
      <div class="grid flex-1 grid-cols-4 gap-3.5">
        <div class="item">
          <div class="label">0-18</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.male0To18"
              @blur="setForm('male0To18', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">18-40</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.male18To40"
              @blur="setForm('male18To40', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">40-60</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.male40To60"
              @blur="setForm('male40To60', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">60以上</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.male60Above"
              @blur="setForm('male60Above', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
      </div>
      <div class="my-3 grid grid-cols-4">
        <div
          class="flex items-center justify-between border border-dashed border-[--auxiliary] px-3.5 shadow-inner shadow-[#0da7c1]"
        >
          <span class="font-bold text-white">女性</span>
          <div>
            <span class="text-xs text-[#5E9DB4]"
              >共 {{ editForm.femaleTotal }} 人</span
            >
          </div>
        </div>
      </div>
      <div class="grid flex-1 grid-cols-4 gap-3.5">
        <div class="item">
          <div class="label">0-18</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.female0To18"
              @blur="setForm('female0To18', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">18-40</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.female18To40"
              @blur="setForm('female18To40', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">40-60</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.female40To60"
              @blur="setForm('female40To60', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">60以上</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="editForm.female60Above"
              @blur="setForm('female60Above', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-link v-show="!disabled" :underline="false" @click="changeDisabled">
        <svg-icon name="icon-system-button-bianji" width="14px" height="12px" />
        <span class="text-[--theme]">编辑</span>
      </el-link>
      <el-button
        v-show="disabled"
        type="primary"
        class="button_function"
        @click="changeDisabled"
        size="small"
        >保存</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
